import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router';
import {Button,Row,Col,Layout, Modal, Breadcrumb,Select,Icon,Form,Input,Affix,message,Upload,Cascader} from 'antd';
// import reqwest from 'reqwest';
import aStyle from '../../styles/App.less'
import style from '../../styles/ResetInput.less';
import inStyle from '../../styles/Info.less'
import {numvail,selectvail,mathvail,bankvail} from '../../utils/Validator.js'
// import {disabledStartDate,disabledEndDate} from '../../utils/Date.js'
import {role_case} from '../../models/Role.js';
import {reqwest_get,reqwest_post} from '../../utils/Reqwest.js'
// import CityPick from '../components/CityPick.js';
// import UpLoadGroup from '../components/UpLoadGroup.js';
import {getBankBin} from 'bankcardinfo'
const FormItem = Form.Item;
const Option =Select.Option;

class Bank extends React.Component{
	constructor(props){
		super(props);
		// this.edit=this.props.location.query.initv=='无敌'?JSON.parse(sessionStorage['edit']):null;
		this.state={
	    list:[],
	    set:JSON.parse(window.localStorage['setting']),
	    previewVisible: false,
      previewImage: '',
	    fileList:[],
	    loading:false,
		}
	}
	handleSubmit(e){
    e.preventDefault();
		console.log(this.state.fileList)
		let _this =this ;
    this.props.form.validateFields((err, values) => {
      console.log(values);
      if (!err) {
      	_this.setState({loading:true});
        reqwest_post('/api/users/add_bank_card',{
        	access_token:window.localStorage['token'],
        	bank_card:{code:values.bank_card,account:values.bank_name,branch:values.bank_brance,name:values.people_name}
        },(data)=>{
        	if(data.status=='success'){
        		message.success('更新成功',0.3);
        		window.location.hash='/app/bank_list?current='+this.props.location.query.current;
        	}else{
        		message.error(data.msg,0.3)
        	}
        });
        _this.setState({loading:false});
      }else{
        message.warning('请输出必填项');
      }
    });
	}
	handleChange(e){
		// 6227003320240034988
		// 4392250804037942
		let _value=e.target.value
		console.log(_value)
		let _this = this;
		if(_value.length===19){
			getBankBin(_value).then(function (data) {
				console.log(data);
				_this.setState({cardName:data.bankName})
			}).catch(function (err) {
				console.log(err);
			})
		}
	}
	render(){
		const {startValue,endValue,endOpen,list,option} = this.state;
		// console.log(this.props.location.)

    const uploadButton = (
      <Row type="flex" justify="space-around" align="middle" style={{height:'100%'}}>
      <div style={{color:'#bbbbbb',marginTop:-8}}>
        <Icon type="cloud-upload-o" style={{fontSize:54}} spin={false}/>
        <h3 className="ant-upload-text" style={{fontSize:15}}>点击上传</h3>
      </div>
      </Row>
    );
  	const {getFieldDecorator}=this.props.form;
		return(
			<Layout >
				<Layout.Content className={`${style.berad}`} >
					<Row>
						<Breadcrumb  className={`${style.blue_dia_none}`}>
							<Breadcrumb.Item ><span className={`${style.blue_dia}`}></span></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div} ${style.bread_div_first}`}><Link to={{pathname:'/app/pay',query:{current:this.props.location.query.current}}}>我的钱包</Link></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div}`}>添加银行卡</Breadcrumb.Item>
	       		</Breadcrumb>
	       	</Row>
				</Layout.Content>
				<Layout style={{background:'#fff'}}>
					<Form className={`${inStyle.ncc_left_layout}`} onSubmit={this.handleSubmit.bind(this)}>
		       	<Row style={{marginTop:30}}>
		       		<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}} >
								<FormItem >
									{getFieldDecorator('people_name',{
										rules:[{required:true,message:'请输入姓名'}]
									})(
										<Input className={`${style.ncc_reset_input}`} placeholder='持卡人姓名' />
									)}
								</FormItem>
							</Col>
						</Row>
						<Row >
		       		<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}} >
								<FormItem >
									{getFieldDecorator('bank_card',{
										rules:[{required:true,validator:(rule,value,callback)=>{
											bankvail(rule,value,callback)
										}}]
									})(
										<Input type='bankCard' onChange={(e)=>this.handleChange(e)} className={`${style.ncc_reset_input}`} placeholder='银行卡号' />
									)}
								</FormItem>
							</Col>
						</Row>
						<Row >
		       		<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}} >
								<FormItem >
									{getFieldDecorator('bank_name',{
										initialValue:this.state.cardName,
										rules:[{required:true,message:'请输入银行名称'}]
									})(
										<Input className={`${style.ncc_reset_input}`} placeholder='银行名称' />
									)}
								</FormItem>
							</Col>
						</Row>
						<Row >
		       		<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}} >
								<FormItem >
									{getFieldDecorator('bank_brance',{
										rules:[{required:true,message:'请输入银行支行'}]
									})(
										<Input className={`${style.ncc_reset_input}`} placeholder='银行支行' />
									)}
								</FormItem>
							</Col>
						</Row>
	       		<Row >
		       		<Col className={`${style.reset_col}`} push={1} >
								<FormItem >
				       		<Affix >
				            <Button htmlType="submit" type="primary" >
				              提交
				            </Button>
				          </Affix>
			          </FormItem>
	          </Col>
						</Row>
					</Form>
				</Layout>
			</Layout>
		)
	}
}

const BankForm = Form.create()(Bank);

export default connect()(BankForm);
